'use client';

import type { TMetadata } from '@/types';
import LoadPage from '@/app/[locale]/load/load';
import ErrorPage from '@/app/[locale]/error/error';
import { useRouter, useSearchParams } from 'next/navigation';
import { useEffect, useRef, useState } from 'react';
import useUser from '@/hooks/useUser';
import {
  clientQueryUserDetails,
  logout,
  queryPostFavourites,
} from '@/services/api';
import { useInfiniteQuery, useMutation, useQuery } from '@tanstack/react-query';
import type {
  IPost,
  IPostFavourite,
  IQueryParams,
  IUserClientDetails,
} from '@/interfaces';
import classs from './userid.module.scss';
import classNames from 'classnames';
import Image from 'next/image';
import { isHttpOrHttps, toRelativeTime } from '@/lib/tool';
import Link from 'next/link';
import useToast from '@/hooks/useToast';
import { NavbarPage } from '@/app/[locale]/navbar';
import FooterPage from '@/app/[locale]/footer';
import UpdatePasswordUserIdPage from '@/app/[locale]/users/[id]/password';
import UpdateBasicInfoUserIdPage from '@/app/[locale]/users/[id]/basicInfo';
import PostName from '@/app/[locale]/common/post/name';
import PostOverview from '@/app/[locale]/common/post/overview';
import PostReadMoreBtn from '@/app/[locale]/common/post/readMore';
import PostTime from '@/app/[locale]/common/post/time';
import { useTranslations } from 'use-intl';

export default function UserIdPage({ metadata }: { metadata: TMetadata }) {
  return (
    <>
      <NavbarPage metadata={metadata} />
      <UserId metadata={metadata} />
      <FooterPage metadata={metadata} />
    </>
  );
}

const UserId = ({ metadata }: { metadata: TMetadata }) => {
  const env = metadata.env;
  const router = useRouter();
  const urlSearchParams = useSearchParams();
  const userQuery = useUser(metadata);
  const myHomepageRef = useRef<HTMLDivElement>(null);
  const myPostRef = useRef<HTMLDivElement>(null);
  const myUpdatePasswordRef = useRef<HTMLDivElement>(null);
  const myUpdateBasicInfoRef = useRef<HTMLDivElement>(null);
  const myCollectionRef = useRef<HTMLDivElement>(null);
  const mySectionRef = useRef<HTMLDivElement>(null);
  const myTagRef = useRef<HTMLDivElement>(null);
  const myStatisticRef = useRef<HTMLDivElement>(null);
  const { show } = useToast();
  const [pages, setPages] = useState<IPost[]>(
    (metadata.all['userId'].v as IUserClientDetails).data.content,
  );
  const sectionIdParam =
    urlSearchParams.get('sectionId') ?? urlSearchParams.get('sid');
  const tagIdParam = urlSearchParams.get('tagId') ?? urlSearchParams.get('tid');
  const t = useTranslations('UserIdPage');

  const clientQueryUserDetailsQuery = useInfiniteQuery(
    metadata.all['userId'].k,
    async (context) => {
      return (await clientQueryUserDetails({
        id: context.queryKey[2] + '',
        query: {
          ...(context.queryKey[4] as IQueryParams),
          ...context.pageParam,
        },
      })) as IUserClientDetails;
    },
    {
      enabled: !!metadata.all['userId'],
      keepPreviousData: true,
      getPreviousPageParam: (firstPage) => {
        if (firstPage.data && firstPage.data.pageable.previous) {
          return {
            page: Math.max(firstPage.data.pageable.page - 1, 0),
          };
        }
      },
      getNextPageParam: (lastPage) => {
        if (lastPage.data && lastPage.data.pageable.next) {
          return {
            page: Math.min(
              lastPage.data.pageable.page + 1,
              lastPage.data.pageable.pages,
            ),
          };
        }
      },
      initialData: () => {
        if (metadata.all['userId']) {
          return {
            pages: [metadata.all['userId'].v as IUserClientDetails],
            pageParams: [
              {
                page: Math.max(
                  ((metadata.all['userId'].k[4] as IQueryParams).page ?? 1) - 1,
                  0,
                ),
              },
            ],
          };
        }
      },
    },
  );
  const queryPostFavouritesQuery = useQuery(
    ['/forum', '/posts', '/favourites'],
    async () => {
      return (await queryPostFavourites()) as IPostFavourite[];
    },
    {
      enabled: !!(
        userQuery.data &&
        userQuery.data.user &&
        clientQueryUserDetailsQuery.data &&
        userQuery.data.user.id ===
          clientQueryUserDetailsQuery.data.pages[0].user.id
      ),
    },
  );

  useEffect(() => {
    if (clientQueryUserDetailsQuery.data) {
      setPages(
        clientQueryUserDetailsQuery.data.pages
          .flatMap((item) => item.data?.content ?? [])
          .map((item) => {
            item._contentUpdatedOnText = toRelativeTime(item.contentUpdatedOn);
            return item;
          }),
      );
    }
  }, [clientQueryUserDetailsQuery.data]);

  const logoutMutation = useMutation(async () => {
    await logout();
  });

  async function onClickItem(index: string) {
    if (index === '我的资料') {
      myHomepageRef.current?.scrollIntoView();
    } else if (index === '修改资料') {
      myUpdateBasicInfoRef.current?.scrollIntoView();
    } else if (index === '修改密码') {
      myUpdatePasswordRef.current?.scrollIntoView();
    } else if (index === '创建帖子') {
      router.push('/posts/new');
    } else if (index === '我的帖子') {
      myPostRef.current?.scrollIntoView();
    } else if (index === '我的收藏') {
      myCollectionRef.current?.scrollIntoView();
    } else if (index === '相关内容') {
      mySectionRef.current?.scrollIntoView();
    } else if (index === '相关标签') {
      myTagRef.current?.scrollIntoView();
    } else if (index === '相关统计') {
      myStatisticRef.current?.scrollIntoView();
    } else if (index === '修改头像') {
      router.push('/avatar');
    } else if (index === '我的应用') {
      router.push('/oauth/client');
    } else if (index === '退出登录') {
      if (logoutMutation.isLoading) {
        return;
      }
      await onClickLogout();
    }
  }

  async function onClickLogout() {
    try {
      await logoutMutation.mutateAsync();

      show({
        type: 'SUCCESS',
        message: t('logoutCompleted'),
      });

      setTimeout(() => {
        show({
          type: 'INFO',
          message: t('reloading'),
        });
      }, 1000);

      setTimeout(() => {
        location.reload();
      }, 1500);
    } catch (e) {
      logoutMutation.reset();
      show({
        type: 'DANGER',
        message: e,
      });
    }
  }

  async function onClickLoadMore() {
    try {
      await clientQueryUserDetailsQuery.fetchNextPage();
    } catch (e) {
      show({
        type: 'DANGER',
        message: e,
      });
    }
  }

  if (clientQueryUserDetailsQuery.data) {
    const sections = clientQueryUserDetailsQuery.data.pages[0].sections;
    const tags = clientQueryUserDetailsQuery.data.pages[0].tags;
    const user = clientQueryUserDetailsQuery.data.pages[0].user;

    return (
      <div>
        <div
          className={classNames(
            'vh-100 position-fixed pt-4 d-none d-md-block',
            classs.box,
          )}
        >
          <div className="vstack gap-4">
            <div
              onClick={onClickItem.bind(this, '我的资料')}
              className={classNames(
                'cursor-pointer hstack gap-2 me-4',
                classs.item,
              )}
              style={{ width: 140 }}
            >
              <span className="text-start flex-grow-1">{t('myProfile')}</span>
              <i className="bi bi-star"></i>
            </div>

            {userQuery.data &&
              userQuery.data.user &&
              userQuery.data.user.id === user.id && (
                <>
                  <div
                    onClick={onClickItem.bind(this, '修改资料')}
                    className={classNames(
                      'cursor-pointer hstack gap-2 me-4',
                      classs.item,
                    )}
                    style={{ width: 140 }}
                  >
                    <span className="text-start flex-grow-1">
                      {t('editProfile')}
                    </span>
                    <i className="bi bi-star"></i>
                  </div>

                  <div
                    onClick={onClickItem.bind(this, '修改密码')}
                    className={classNames(
                      'cursor-pointer hstack gap-2 me-4',
                      classs.item,
                    )}
                    style={{ width: 140 }}
                  >
                    <span className="text-start flex-grow-1">
                      {t('chgPassword')}
                    </span>
                    <i className="bi bi-star"></i>
                  </div>

                  <div
                    onClick={onClickItem.bind(this, '创建帖子')}
                    className={classNames(
                      'cursor-pointer hstack gap-2 me-4',
                      classs.item,
                    )}
                    style={{ width: 140 }}
                  >
                    <span className="text-start flex-grow-1">
                      {t('createPost')}
                    </span>
                    <i className="bi bi-star"></i>
                  </div>
                </>
              )}

            <div
              onClick={onClickItem.bind(this, '我的帖子')}
              className={classNames(
                'cursor-pointer hstack gap-2 me-4',
                classs.item,
              )}
              style={{ width: 140 }}
            >
              <span className="text-start flex-grow-1">{t('myPosts')}</span>
              <i className="bi bi-star"></i>
            </div>

            {userQuery.data &&
              userQuery.data.user &&
              userQuery.data.user.id === user.id && (
                <div
                  onClick={onClickItem.bind(this, '我的收藏')}
                  className={classNames(
                    'cursor-pointer hstack gap-2 me-4',
                    classs.item,
                  )}
                  style={{ width: 140 }}
                >
                  <span className="text-start flex-grow-1">
                    {t('myFavorites')}
                  </span>
                  <i className="bi bi-star"></i>
                </div>
              )}

            <div
              onClick={onClickItem.bind(this, '相关内容')}
              className={classNames(
                'cursor-pointer hstack gap-2 me-4',
                classs.item,
              )}
              style={{ width: 140 }}
            >
              <span className="text-start flex-grow-1">{t('relContent')}</span>
              <i className="bi bi-star"></i>
            </div>

            <div
              onClick={onClickItem.bind(this, '相关标签')}
              className={classNames(
                'cursor-pointer hstack gap-2 me-4',
                classs.item,
              )}
              style={{ width: 140 }}
            >
              <span className="text-start flex-grow-1">{t('relTags')}</span>
              <i className="bi bi-star"></i>
            </div>

            <div
              onClick={onClickItem.bind(this, '相关统计')}
              className={classNames(
                'cursor-pointer hstack gap-2 me-4',
                classs.item,
              )}
              style={{ width: 140 }}
            >
              <span className="text-start flex-grow-1">
                {t('relStatistics')}
              </span>
              <i className="bi bi-star"></i>
            </div>

            {userQuery.data &&
              userQuery.data.user &&
              userQuery.data.user.id === user.id && (
                <>
                  <div
                    onClick={onClickItem.bind(this, '修改头像')}
                    className={classNames(
                      'cursor-pointer hstack gap-2 me-4',
                      classs.item,
                    )}
                    style={{ width: 140 }}
                  >
                    <span className="text-start flex-grow-1">
                      {user.details.largeAvatarUrl
                        ? t('editAvatar')
                        : t('uploadAvatar')}
                    </span>
                    <i className="bi bi-star"></i>
                  </div>

                  {userQuery.data.clientConfig?.showMenuEntry && (
                    <div
                      onClick={onClickItem.bind(this, '我的应用')}
                      className={classNames(
                        'cursor-pointer hstack gap-2 me-4',
                        classs.item,
                      )}
                      style={{ width: 140 }}
                    >
                      <span className="text-start flex-grow-1">
                        {t('myApps')}
                      </span>
                      <i className="bi bi-star"></i>
                    </div>
                  )}

                  <div
                    onClick={onClickItem.bind(this, '退出登录')}
                    className={classNames(
                      'cursor-pointer hstack gap-2 me-4',
                      classs.item,
                    )}
                    style={{ width: 140 }}
                  >
                    <span className="text-start flex-grow-1">
                      {logoutMutation.isLoading
                        ? `${t('exitingNow')}...`
                        : t('logout')}
                    </span>
                    {logoutMutation.isLoading ? (
                      <span
                        className="spinner-border spinner-border-sm"
                        role="status"
                        aria-hidden="true"
                      ></span>
                    ) : (
                      <i className="bi bi-arrow-bar-right"></i>
                    )}
                  </div>
                </>
              )}
          </div>
        </div>
        <div className={classNames('py-4 overflow-hidden', classs.marginLeft)}>
          <div>
            <div ref={myHomepageRef} className="mb-4 text-secondary">
              <i className="bi bi-signpost me-2"></i>
              {t('myProfile')}
            </div>
            <div className="card mb-4">
              <div className="card-body">
                <div className="row row-cols-1 g-4">
                  <div className="col">
                    <div className="hstack gap-4" style={{ height: 200 }}>
                      <div>
                        {user.details.largeAvatarUrl ? (
                          <Image
                            className="rounded-circle img-thumbnail"
                            src={
                              isHttpOrHttps(user.details.largeAvatarUrl)
                                ? user.details.largeAvatarUrl
                                : env.APP_OSS_SERVER +
                                  user.details.largeAvatarUrl
                            }
                            width={200}
                            height={200}
                            alt={user.alias}
                            title={user.alias}
                            placeholder="blur"
                            blurDataURL={env.APP_BLUR_DATA_URL}
                            style={{ objectFit: 'cover' }}
                          />
                        ) : (
                          <div
                            style={{ width: 200, height: 200 }}
                            className="rounded-circle img-thumbnail d-flex align-items-center justify-content-center"
                            title={user.alias}
                          >
                            <div className="text-muted">
                              {userQuery.data &&
                              userQuery.data.user &&
                              userQuery.data.user.id === user.id ? (
                                <Link
                                  className="link-secondary text-decoration-none text-decoration-underline-hover"
                                  href="/avatar"
                                >
                                  {t('uploadAvatar')}
                                </Link>
                              ) : (
                                <Image
                                  className="rounded-circle"
                                  src="/images/avatar.png"
                                  alt={user.alias}
                                  title={user.alias}
                                  width={200}
                                  height={200}
                                  placeholder="blur"
                                  blurDataURL={env.APP_BLUR_DATA_URL}
                                />
                              )}
                            </div>
                          </div>
                        )}
                      </div>
                      <div className="h-100">
                        <div className="h3 mt-2">{user.alias}</div>
                        {user.roles.filter((item) => !item.hide).length !==
                          0 && (
                          <div className="hstack mt-4 cursor-default">
                            <i className="bi bi-person-badge me-2"></i>
                            {user.roles
                              .filter((item) => !item.hide)
                              .map((item, index) => {
                                return (
                                  <div key={item.id}>
                                    <span>{item.name}</span>
                                    {index !==
                                      user.roles.filter((item) => !item.hide)
                                        .length -
                                        1 && <span className="mx-2">/</span>}
                                  </div>
                                );
                              })}
                          </div>
                        )}

                        {user.details.personalizedSignature && (
                          <div className="my-4">
                            <i className="bi bi-balloon-fill me-2"></i>
                            {user.details.personalizedSignature}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                  <div className="col">
                    <hr className="text-muted" />
                  </div>
                  <div className="col">
                    <div className="row row-cols-2 g-4 mb-3">
                      <div className="col-4">
                        <div className="h5">
                          <i className="bi bi-person-rolodex me-2"></i>
                          {t('contactInformation')}
                        </div>

                        {user.details.contacts &&
                        user.details.contacts.length !== 0 ? (
                          <div className="vstack gap-2 mt-4">
                            {user.details.contacts.map((item) => {
                              return (
                                <div key={item.id}>
                                  <span className="me-2">{item.key}</span>
                                  {item.val.includes('@') &&
                                  item.val.includes('.') ? (
                                    <a
                                      className="link-dark text-decoration-none text-decoration-underline-hover"
                                      href={`mailto:${item.val}`}
                                    >
                                      {item.val}
                                    </a>
                                  ) : (
                                    <>
                                      {isHttpOrHttps(item.val) ? (
                                        <a
                                          className="link-dark text-decoration-none text-decoration-underline-hover"
                                          href={item.val}
                                        >
                                          {item.val}
                                        </a>
                                      ) : (
                                        <span>{item.val}</span>
                                      )}
                                    </>
                                  )}
                                </div>
                              );
                            })}
                          </div>
                        ) : (
                          <div className="mt-4 text-muted">
                            {t('noInformation')}
                          </div>
                        )}
                      </div>
                      <div className="col-8">
                        <div className="h5">
                          <i className="bi bi-person-lines-fill me-2"></i>
                          {t('aboutMe')}
                        </div>

                        {user.details.about ? (
                          <div className="mt-4">
                            <div
                              dangerouslySetInnerHTML={{
                                __html: user.details.about,
                              }}
                            />
                          </div>
                        ) : (
                          <div className="mt-4 text-muted">
                            {t('noInformation')}
                          </div>
                        )}
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>

          {userQuery.data &&
            userQuery.data.user &&
            userQuery.data.user.id === user.id && (
              <>
                <div className="mt-5">
                  <div
                    ref={myUpdateBasicInfoRef}
                    className="mb-4 text-secondary"
                  >
                    <i className="bi bi-signpost me-2"></i>
                    {t('editProfile')}
                  </div>
                  <div className="mb-4 card">
                    <div className="card-body">
                      <UpdateBasicInfoUserIdPage
                        items={userQuery.data.user.details.contacts}
                      />
                    </div>
                  </div>
                </div>

                <div className="mt-5">
                  <div
                    ref={myUpdatePasswordRef}
                    className="mb-4 text-secondary"
                  >
                    <i className="bi bi-signpost me-2"></i>
                    {t('changePassword')}
                  </div>
                  <div className="mb-4 card">
                    <div className="card-body">
                      <UpdatePasswordUserIdPage />
                    </div>
                  </div>
                </div>
              </>
            )}

          <div className="mt-5">
            <div ref={myPostRef} className="mb-4 text-secondary">
              <i className="bi bi-signpost me-2"></i>
              {t('myPosts')}
            </div>
            <div className="mb-4 row row-cols-1 g-4">
              {pages.map((item) => {
                const style = (item.styles || []).find(
                  (value) => value.type === 'NAME',
                );

                return (
                  <div key={item.id} className="col">
                    <div className="card text-center">
                      <div className="card-body">
                        <div className="card-title">
                          <PostName
                            item={item}
                            isFwSemibold={false}
                            isJustifyContentCenter
                          />
                        </div>

                        <PostOverview item={item} bodClassName="my-4" />

                        <PostReadMoreBtn
                          item={item}
                          isEdit={
                            userQuery.data &&
                            userQuery.data.user &&
                            userQuery.data.user.id === user.id &&
                            user.id === item.createdBy
                          }
                        />
                      </div>

                      <div className="card-footer">
                        <PostTime item={item} />
                      </div>
                    </div>
                  </div>
                );
              })}

              {pages.length === 0 && (
                <div className="col">
                  <div className="card text-center cursor-default">
                    <div className="card-body">
                      <div className="card-text text-muted">
                        {t('noArticle')}
                      </div>
                    </div>
                  </div>
                </div>
              )}
            </div>

            <LoadMoreBtn
              onClickLoadMore={onClickLoadMore}
              isDisabled={
                !clientQueryUserDetailsQuery.hasNextPage ||
                clientQueryUserDetailsQuery.isFetchingNextPage
              }
              isFetchingNextPage={
                clientQueryUserDetailsQuery.isFetchingNextPage
              }
            />
          </div>

          {userQuery.data &&
            userQuery.data.user &&
            userQuery.data.user.id === user.id && (
              <>
                {queryPostFavouritesQuery.data && (
                  <div className="mt-5">
                    <div ref={myCollectionRef} className="mb-4 text-secondary">
                      <i className="bi bi-signpost me-2"></i>
                      {t('myFavorites')}
                    </div>
                    <div className="mb-4 row row-cols-1 g-4">
                      {queryPostFavouritesQuery.data.length === 0 && (
                        <div className="col">
                          <div className="card text-center cursor-default">
                            <div className="card-body">
                              <div className="card-text text-muted">
                                {t('noFavorite')}
                              </div>
                            </div>
                          </div>
                        </div>
                      )}

                      {queryPostFavouritesQuery.data.map((item) => {
                        return (
                          <div key={item.id} className="col">
                            <div className="card text-center">
                              <div className="card-body">
                                <h5 className="card-title">
                                  <Link
                                    className="link-body-emphasis link-offset-3 link-underline-opacity-0 link-underline-opacity-100-hover"
                                    href={`/posts/${item.postId}`}
                                  >
                                    {item.name}
                                  </Link>
                                </h5>

                                <Link
                                  className="btn btn-primary mt-4"
                                  href={`/posts/${item.postId}`}
                                >
                                  <i className="bi bi-book me-2"></i>
                                  {t('readMore')}
                                </Link>
                              </div>
                              <div className="card-footer text-secondary cursor-default">
                                <time dateTime={item.updatedOn}>
                                  {toRelativeTime(item.updatedOn)}
                                </time>
                              </div>
                            </div>
                          </div>
                        );
                      })}
                    </div>
                  </div>
                )}

                {queryPostFavouritesQuery.isLoading && (
                  <div className="mt-5">
                    <div ref={myCollectionRef} className="mb-4 text-secondary">
                      <i className="bi bi-signpost me-2"></i>
                      {t('myFavorites')}
                    </div>
                    <div className="mb-4 row row-cols-1 g-4">
                      <div className="col">
                        <div className="card text-center cursor-default">
                          <div className="card-body">
                            <div className="hstack gap-2 align-items-center justify-content-center">
                              <div className="spinner-border" role="status">
                                <span className="visually-hidden">
                                  Loading...
                                </span>
                              </div>
                              <div className="card-text text-muted">
                                {t('loadingFavorites')}...
                              </div>
                            </div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                )}
              </>
            )}

          <div className="mt-5">
            <div ref={mySectionRef} className="mb-4 text-secondary">
              <i className="bi bi-signpost me-2"></i>
              {t('relatedContent')}
            </div>
            <div className="mb-4 row row-cols-5 g-4">
              {sections.map((item) => {
                return (
                  <div key={item.id} className="col">
                    <div className="card">
                      <div className="list-group list-group-flush text-center">
                        <Link
                          href={`/users/${user.id}?sectionId=${item.id}`}
                          className={classNames(
                            'list-group-item list-group-item-action py-3',
                            {
                              active: sectionIdParam === item.id + '',
                            },
                          )}
                        >
                          {item.name}
                        </Link>
                      </div>
                    </div>
                  </div>
                );
              })}

              <div className="col">
                <div className="card">
                  <div className="list-group list-group-flush text-center">
                    <Link
                      href={`/users/${user.id}`}
                      className={classNames(
                        'list-group-item list-group-item-action py-3',
                        {
                          disabled: sections.length === 0,
                        },
                      )}
                    >
                      {t('all')}
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-5">
            <div ref={myTagRef} className="mb-4 text-secondary">
              <i className="bi bi-signpost me-2"></i>
              {t('relatedTags')}
            </div>
            <div className="mb-4 row row-cols-6 g-4">
              {tags.map((item) => {
                return (
                  <div key={item.id} className="col">
                    <div className="card">
                      <div className="list-group list-group-flush text-center">
                        <Link
                          href={`/users/${user.id}?tagId=${item.id}`}
                          className={classNames(
                            'list-group-item list-group-item-action',
                            {
                              active: tagIdParam === item.id + '',
                            },
                          )}
                        >
                          {item.name}
                        </Link>
                      </div>
                    </div>
                  </div>
                );
              })}

              <div className="col">
                <div className="card">
                  <div className="list-group list-group-flush text-center">
                    <Link
                      href={`/users/${user.id}`}
                      className={classNames(
                        'list-group-item list-group-item-action',
                        {
                          disabled: tags.length === 0,
                        },
                      )}
                    >
                      {t('all')}
                    </Link>
                  </div>
                </div>
              </div>
            </div>
          </div>

          <div className="mt-5">
            <div ref={myStatisticRef} className="mb-4 text-secondary">
              <i className="bi bi-signpost me-2"></i>
              {t('relatedStatistics')}
            </div>
            <div className="mb-4 row row-cols-6 g-4">
              <div className="col">
                <div className="card rounded-5">
                  <div className="card-body">
                    <div className="mb-1">
                      <i className="bi bi-bar-chart fs-5"></i>
                    </div>
                    <p className="card-text">
                      {t('numberOfContents')}&nbsp;
                      {user.statistic.sections || 0}
                    </p>
                  </div>
                </div>
              </div>

              <div className="col">
                <div className="card rounded-5">
                  <div className="card-body">
                    <div className="mb-1">
                      <i className="bi bi-bar-chart fs-5"></i>
                    </div>
                    <p className="card-text">
                      {t('numberOfTags')}&nbsp;{user.statistic.tags || 0}
                    </p>
                  </div>
                </div>
              </div>

              <div className="col">
                <div className="card rounded-5">
                  <div className="card-body">
                    <div className="mb-1">
                      <i className="bi bi-bar-chart fs-5"></i>
                    </div>
                    <p className="card-text">
                      {t('numberOfPosts')}&nbsp;{user.statistic.posts || 0}
                    </p>
                  </div>
                </div>
              </div>

              <div className="col">
                <div className="card rounded-5">
                  <div className="card-body">
                    <div className="mb-1">
                      <i className="bi bi-bar-chart fs-5"></i>
                    </div>
                    <p className="card-text">
                      {t('numberOfComments')}&nbsp;
                      {user.statistic.comments || 0}
                    </p>
                  </div>
                </div>
              </div>

              <div className="col">
                <div className="card rounded-5">
                  <div className="card-body">
                    <div className="mb-1">
                      <i className="bi bi-bar-chart fs-5"></i>
                    </div>
                    <p className="card-text">
                      {t('numberOfReplies')}&nbsp;{user.statistic.replies || 0}
                    </p>
                  </div>
                </div>
              </div>

              <div className="col">
                <div className="card rounded-5">
                  <div className="card-body">
                    <div className="mb-1">
                      <i className="bi bi-bar-chart fs-5"></i>
                    </div>
                    <p className="card-text">
                      {t('numberOfViews')}&nbsp;{user.statistic.views || 0}
                    </p>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    );
  }

  if (clientQueryUserDetailsQuery.error) {
    return <ErrorPage error={clientQueryUserDetailsQuery.error} />;
  }

  return <LoadPage />;
};

const LoadMoreBtn = ({
  onClickLoadMore,
  isDisabled,
  isFetchingNextPage,
}: {
  onClickLoadMore: () => void;
  isDisabled: boolean;
  isFetchingNextPage: boolean;
}) => {
  return (
    <div className="row mt-4 mb-3">
      <div className="col">
        <button
          onClick={onClickLoadMore}
          disabled={isFetchingNextPage && isDisabled}
          type="button"
          className="btn rounded-pill text-secondary-emphasis w-100"
        >
          {isFetchingNextPage ? (
            <>
              <span
                className="spinner-border spinner-border-sm me-2"
                role="status"
                aria-hidden="true"
              ></span>
              Loading...
            </>
          ) : (
            <i className="bi bi-three-dots"></i>
          )}
        </button>
      </div>
    </div>
  );
};
